<header class="top-header clearfix">

    <!-- Logo -->
    <div class="logo bg-info-alt">
        <a href="#/">
            <span class="logo-icon imd imd-dashboard"></span>
            <span class="logo-text">{{main.brand}}</span>
        </a>
    </div>

    <!-- needs to be put after logo to make it work -->
    <div class="menu-button" toggle-off-canvas>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>

    <div class="top-nav">
        <ul class="nav-left list-unstyled">
            <li>
                <a href="#/" data-toggle-nav-collapsed-min
                             ui-wave
                             class="toggle-min"
                             ><i class="imd imd-menu"></i></a>
            </li>
            <!--<li class="search-box visible-md visible-lg">-->
                <!--<div class="input-group">-->
                    <!--<span class="input-group-addon"><i class="imd imd-search"></i></span>-->
                    <!--<input type="text" class="form-control" placeholder="{{ 'SEARCH' | translate }}">-->
                    <!--<span class="input-bar"></span>-->
                <!--</div>-->
            <!--</li>-->
            <!--<li class="dropdown" dropdown is-open="status.isopenEmail">
                <a href="javascript:;" class="dropdown-toggle" dropdown-toggle ng-disabled="disabled" ui-wave>
                    <i class="imd imd-email"></i>
                    <span class="badge badge-danger">3</span>
                </a>
              <div class="dropdown-menu with-arrow panel panel-default scaleInLeft animated">
                    <div class="panel-heading">
                        You have 3 mails.
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="javascript:;" class="media">
                                <span class="media-left media-icon">
                                    <span class="btn-icon btn-icon-round btn-success"><i class="imd imd-email"></i></span>
                                </span>
                                <div class="media-body">
                                    <span class="block">Lisa sent you a mail</span>
                                    <span class="text-muted block">2min ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="javascript:;" class="media">
                                <span class="media-left media-icon">
                                    <span class="btn-icon btn-icon-round btn-info"><i class="imd imd-email"></i></span>
                                </span>
                                <div class="media-body">
                                    <span class="block">Jane sent you a mail</span>
                                    <span class="text-muted">3 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="javascript:;" class="media">
                                <span class="media-left media-icon">
                                    <span class="btn-icon btn-icon-round btn-danger"><i class="imd imd-email"></i></span>
                                </span>
                                <div class="media-body">
                                    <span class="block">Lynda sent you a mail</span>
                                    <span class="text-muted">9 hours ago</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="panel-footer">
                        <a href="#/mail/inbox">Show all mails.</a>
                    </div>
                </div>
		
		
            </li> -->
        </ul>

        <ul class="nav-right pull-right list-unstyled">
            <li class="dropdown text-normal nav-profile"  dropdown is-open="status.isopenProfile">
                <a href="javascript:;" class="dropdown-toggle" dropdown-toggle ng-disabled="disabled" ui-wave>
                    <img ng-if="!$root.userInformation.FotoBase64" src="images/assets/default-profile-image.svg" alt="User image" class="img-circle img30_30">
                    <img ng-if="$root.userInformation.FotoBase64" ng-src="data:image/jpeg;base64,{{$root.userInformation.FotoBase64}}" alt="{{$root.userInformation.nombre}}" class="img-circle img30_30">
                    <span class="hidden-xs">
                        <span>{{$root.userInformation.Nombre}}</span>
                    </span>
                </a>
                <ul class="dropdown-menu with-arrow pull-right scaleInRight animated">
                    <li>
                        <a href="#/">
                            <i class="imd imd-home"></i>
                            <span data-translate="DASHBOARD"></span>
                        </a>
                    </li>
                    <!--
		    <li>
                        <a href="#/pages/profile">
                            <i class="imd imd-person"></i>
                            <span data-translate="MY_PROFILE"></span>
                        </a>
                    </li>
		    -->
                    <li>
                        <a href="" data-ng-click="logout()">
                            <i class="imd imd-exit-to-app"></i>
                            <span data-translate="LOG_OUT"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown langs text-normal" data-ng-controller="LangCtrl" dropdown is-open="status.isopenLang">
                <a href="javascript:;" class="dropdown-toggle active-flag" dropdown-toggle ng-disabled="disabled" ui-wave>
                    <div class="flag {{ getFlag() }}"></div>
                </a>
                <ul class="dropdown-menu with-arrow  pull-right list-langs scaleInRight animated" role="menu">
                    <li data-ng-show="lang !== 'English' ">
                        <a href="javascript:;" data-ng-click="setLang('English')"><div class="flag flags-american"></div> English</a></li>
                    <li data-ng-show="lang !== 'Español' ">
                        <a href="javascript:;" data-ng-click="setLang('Español')"><div class="flag flags-spain"></div> Español</a></li>
                </ul>
            </li>
        </ul>
    </div>

</header>
